<template>
  <div class="app-container home">
    <div class="index-top">
      <div class="top-title">今日生产履历推送</div>
      <div class="top-table">
        <el-table  :data="tableData" >
          <el-table-column  type="index" width="50" />
          <el-table-column label="车型" align="center" prop="carType" />
          <el-table-column label="零件" align="center" prop="spareParts" />
          <el-table-column label="开始生产时间" align="center" prop="startTime" />
          <el-table-column label="结束生产时间" align="center" prop="endTime" />
          <el-table-column label="实际生产件数" align="center" prop="total" />
          <el-table-column label="孔数合格率" align="center" prop="passRate" />
          <el-table-column label="当批次开裂件数" align="center" prop="ngCount" />
        </el-table>
      </div>
    </div>
    <el-radio-group v-model="offset" style="margin-bottom: 30px;">
      <el-radio-button label="1">当天</el-radio-button>
      <el-radio-button label="6">最近7天</el-radio-button>
    </el-radio-group>
    <div class="index-chart">
      <div class="left-chart" v-loading="loading">
        <pie-chart :chart-data="pieData"></pie-chart>
      </div>
      <div class="right-chart" v-loading="loading">
        <bar-shadow :chart-data="chartData"></bar-shadow>
      </div>
    </div>
  </div>
</template>

<script>
import pieChart from './dashboard/index/pieChart.vue'
import barShadow from './dashboard/index/barShadow.vue'
import { getIndexChartData } from "@/api/index";
export default {
  name: "Index",
  components:{
    pieChart,
    barShadow
  },
  data() {
    return {
      offset:1,
      loading:true,
      tableData:[],
      pieData:{
        data:[],
        offset:null
      },
      chartData:{
        xData:[],
        yData1:[],
        yData2:[],
        yData3:[],
        yData4:[],
        yData5:[],
        offset:null
      }
    };
  },
  created() {
    this.getData()
  },
	methods: {
    getData() {
      getIndexChartData({offset:this.offset}).then(res=>{
        this.loading = false;
        if(res.success){
          this.tableData = res.data.indexProductionOffset;
          let pieData = []
          res.data.indexPieOffset.forEach(el=>{
            pieData.push({
              value:el.total,
              name:el.carType
            })
          })
          this.pieData.data = pieData;
          this.pieData.offset = this.offset;
          let xData = [];
          let yData1 = [];
          let yData2 = [];
          let yData3 = [];
          let yData4 = [];
          let yData5 = [];
          res.data.sparePartsReport.forEach(el=>{
            xData.push(el.label)
            yData1.push(el.okTotal)
            yData2.push(el.total-el.okTotal-el.alarmTotal)
            yData3.push(el.alarmTotal)
            yData4.push((el.proportion*100).toFixed(0))
            yData5.push((el.alarmProportion*100).toFixed(0))
          })
          this.chartData = {
            xData,yData1,yData2,yData3,yData4,yData5,offset:this.offset
          }
        }
      })
    },
  },
  watch:{
    offset(){
      this.getData()
    }
  }
};
</script>

<style scoped lang="scss">
  .index-top{
    min-height: 300px;
    .top-title{
      font-size: 24px;
      font-weight: bold;
      color: #222;
    }
    .top-table{
      margin-top: 20px;
    }
  }
  .index-chart{
    white-space: nowrap;
    width: 100%;
    height: 500px;
    margin-top: 20px;
    .left-chart{
      display: inline-block;
      vertical-align: top;
      width: 30%;
      height: 100%;
    }
    .right-chart{
      display: inline-block;
      vertical-align: top;
      width: 70%;
      height: 100%;
    }
  }
</style>

